<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>纯JS版待办事项</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #ffffff;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 20px;
      color: #333;
    }

    .app-container {
      width: 100%;
      max-width: 800px; /* 增加最大宽度 */
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    h1 {
      text-align: center;
      color: #8e44ad; /* 紫色 */
      margin-bottom: 5px; /* 减小与副标题的间距 */
      font-size: 2.2rem;
      width: 100%;
      max-width: 800px; /* 匹配容器宽度 */
    }

    .subtitle {
      text-align: center;
      color: #7f8c8d; /* 灰色 */
      margin-bottom: 25px; /* 增加与下方容器的间距 */
      font-size: 1rem;
      width: 100%;
      max-width: 800px; /* 匹配容器宽度 */
    }

    .container {
      width: 100%;
      max-width: 800px; /* 增加最大宽度 */
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      padding: 40px; /* 增加内边距 */
      border: 1px solid #eee;
    }

    .input-section {
      display: flex;
      margin-bottom: 30px; /* 增加间距 */
      gap: 15px; /* 增加按钮与输入框间距 */
    }

    #new-todo-input {
      flex: 1;
      padding: 16px; /* 增加输入框内边距 */
      border: 2px solid #ddd;
      border-radius: 8px;
      font-size: 1.1rem; /* 增大字体 */
      transition: border-color 0.3s;
    }

    #new-todo-input:focus {
      outline: none;
      border-color: #8e44ad; /* 紫色 */
    }

    #add-btn {
      padding: 16px 25px; /* 增加按钮内边距 */
      background-color: #8e44ad; /* 紫色 */
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 1.1rem; /* 增大字体 */
      transition: background-color 0.3s;
    }

    #add-btn:hover {
      background-color: #7d3c98; /* 深一点的紫色 */
    }

    .filters {
      display: flex;
      justify-content: center;
      gap: 20px; /* 增加按钮间距 */
      margin-bottom: 30px; /* 增加间距 */
      flex-wrap: wrap;
    }

    .filter-btn {
      padding: 10px 20px; /* 增加按钮内边距 */
      background-color: #ecf0f1;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      font-size: 1rem; /* 增大字体 */
      transition: all 0.3s;
    }

    .filter-btn.active,
    .filter-btn:hover {
      background-color: #8e44ad; /* 紫色 */
      color: white;
    }

    #todo-list {
      list-style: none;
    }

    .todo-item {
      display: flex;
      align-items: center;
      padding: 18px; /* 增加项目内边距 */
      background-color: #ffffff;
      border-radius: 8px;
      margin-bottom: 15px; /* 增加项目间距 */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s, opacity 0.3s, background-color 0.3s;
      animation: fadeIn 0.4s ease-out;
      border: 1px solid #eee;
    }

    .todo-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .todo-item.completed .todo-text {
      text-decoration: line-through;
      color: #95a5a6;
    }

    .todo-checkbox {
      margin-right: 18px; /* 增加复选框与文本间距 */
      width: 20px; /* 增大复选框 */
      height: 20px;
      cursor: pointer;
    }

    .todo-text {
      flex: 1;
      font-size: 1.2rem; /* 增大待办事项文字 */
      word-break: break-word;
      padding-right: 18px; /* 增加文本与删除按钮间距 */
    }

    .delete-btn {
      background-color: #e74c3c;
      color: white;
      border: none;
      border-radius: 5px;
      padding: 8px 15px; /* 增加删除按钮内边距 */
      cursor: pointer;
      font-size: 1rem; /* 增大字体 */
      opacity: 0.7;
      transition: opacity 0.3s;
    }

    .delete-btn:hover {
      opacity: 1;
    }

    .empty-state {
      text-align: center;
      padding: 80px 20px; /* 增加空状态区域高度 */
      color: #7f8c8d;
      font-style: italic;
      background-color: #f9f9f9; /* Light background for the empty state area */
      border-radius: 8px;
      border: 1px dashed #ddd; /* Dashed border to visually separate */
      margin-top: 20px;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 800px) {
      .app-container {
        max-width: 600px;
      }
      h1, .subtitle, .container {
        max-width: 600px;
      }
    }

    @media (max-width: 600px) {
      .app-container {
        padding: 15px;
      }

      h1 {
        font-size: 1.8rem;
        margin-bottom: 5px;
      }

      .subtitle {
        font-size: 0.9rem;
        margin-bottom: 15px;
      }

      .container {
        padding: 25px;
      }

      .input-section {
        flex-direction: column;
        gap: 10px;
      }

      .filters {
        gap: 10px;
      }

      .filter-btn {
        padding: 8px 15px;
        font-size: 0.9rem;
      }

      .todo-item {
        padding: 15px;
        margin-bottom: 12px;
      }

      .todo-checkbox {
        margin-right: 15px;
        width: 18px;
        height: 18px;
      }

      .todo-text {
        font-size: 1.1rem;
        padding-right: 15px;
      }

      .delete-btn {
        padding: 6px 12px;
        font-size: 0.9rem;
      }
    }
  </style>
</head>
<body>
  <div class="app-container">
    <h1>待办事项</h1>
    <div class="subtitle">简单高效的管理你的任务</div>
    <div class="container">
      <div class="input-section">
        <input type="text" id="new-todo-input" placeholder="输入新的待办事项...">
        <button id="add-btn">添加</button>
      </div>
      <div class="filters">
        <button class="filter-btn active" data-filter="all">全部</button>
        <button class="filter-btn" data-filter="active">未完成</button>
        <button class="filter-btn" data-filter="completed">已完成</button>
      </div>
      <ul id="todo-list"></ul>
    </div>
  </div>

  <script>
    class TodoApp {
      constructor() {
        this.todos = JSON.parse(localStorage.getItem('todos')) || [];
        this.currentFilter = 'all';
        this.initElements();
        this.bindEvents();
        this.render();
      }

      initElements() {
        this.newTodoInput = document.getElementById('new-todo-input');
        this.addButton = document.getElementById('add-btn');
        this.todoList = document.getElementById('todo-list');
        this.filterButtons = document.querySelectorAll('.filter-btn');
      }

      bindEvents() {
        this.addButton.addEventListener('click', () => this.addTodo());
        this.newTodoInput.addEventListener('keypress', (e) => {
          if (e.key === 'Enter') {
            this.addTodo();
          }
        });

        this.filterButtons.forEach(button => {
          button.addEventListener('click', (e) => {
            this.setActiveFilter(e.target.dataset.filter);
          });
        });
      }

      addTodo() {
        const text = this.newTodoInput.value.trim();
        if (text) {
          const newTodo = {
            id: Date.now(),
            text,
            completed: false
          };
          this.todos.push(newTodo);
          this.saveToLocalStorage();
          this.newTodoInput.value = '';
          this.render();
        }
      }

      toggleTodo(id) {
        const todo = this.todos.find(t => t.id === id);
        if (todo) {
          todo.completed = !todo.completed;
          this.saveToLocalStorage();
          this.render();
        }
      }

      deleteTodo(id) {
        this.todos = this.todos.filter(t => t.id !== id);
        this.saveToLocalStorage();
        this.render();
      }

      setActiveFilter(filter) {
        this.currentFilter = filter;
        this.filterButtons.forEach(btn => {
          btn.classList.toggle('active', btn.dataset.filter === filter);
        });
        this.render();
      }

      saveToLocalStorage() {
        localStorage.setItem('todos', JSON.stringify(this.todos));
      }

      render() {
        // Clear the list
        this.todoList.innerHTML = '';

        // Filter todos based on current filter
        let filteredTodos = this.todos;
        if (this.currentFilter === 'active') {
          filteredTodos = this.todos.filter(todo => !todo.completed);
        } else if (this.currentFilter === 'completed') {
          filteredTodos = this.todos.filter(todo => todo.completed);
        }

        if (filteredTodos.length === 0) {
          this.todoList.innerHTML = '<div class="empty-state"><p>暂无待办事项</p></div>';
          return;
        }

        filteredTodos.forEach(todo => {
          const li = document.createElement('li');
          li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
          li.dataset.id = todo.id;

          li.innerHTML = `
            <input type="checkbox" class="todo-checkbox" ${todo.completed ? 'checked' : ''}>
            <span class="todo-text">${this.escapeHtml(todo.text)}</span>
            <button class="delete-btn">删除</button>
          `;

          const checkbox = li.querySelector('.todo-checkbox');
          const deleteBtn = li.querySelector('.delete-btn');

          checkbox.addEventListener('change', () => this.toggleTodo(todo.id));
          deleteBtn.addEventListener('click', () => this.deleteTodo(todo.id));

          this.todoList.appendChild(li);
        });
      }

      // Simple HTML escaping to prevent XSS
      escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
      }
    }

    // Initialize the app when the DOM is loaded
    document.addEventListener('DOMContentLoaded', () => {
      new TodoApp();
    });
  </script>
</body>
</html>